// index.vue.hbs
<script setup lang="ts">
import axios from 'axios'
import { nextTick, onMounted, ref } from 'vue'
import { useDraggable } from 'vue-draggable-plus'
import Child from './child/child.vue'

const list = ref([
  {
    name: 'Joao',
    id: 1,
  },
  {
    name: 'Jean',
    id: 2,
  },
  {
    name: 'Johanna',
    id: 3,
  },
  {
    name: 'Juan',
    id: 4,
  },
])
const el = ref()

useDraggable(el, list, {
  animation: 150,
  ghostClass: 'ghost',
  onStart() {
    console.log('start')
  },
  onUpdate() {
    console.log('update')
  },
})

const money = ref(80)

async function onScrollTarget() {
  // await nextTick(() => {
  //   const target = document.querySelector('.target')
  //   target?.scrollIntoView({ behavior: 'smooth' })
  // })
  axios.get('http://192.168.1.111:8080/api/101.6656,39.2072/hourly?hourlysteps=48')
}

function getServer() {
  // console.log(encodeURIComponent('http://www.shuxuedianying.com'))
}

onMounted(async () => {
  // const res = await axios.get('https://wodefengpower.com/admin/captchaImage')
  // console.log(res)
})
const content = ref('')
async function onSendApi() {
  const data = {
    content: '你好',
    type: 'composition',
  }

  try {
    const response = await fetch('http://192.168.1.167:8087/v1/ai/search', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(data),
    })

    console.log('Response:', response)

    if (!response.ok) {
      throw new Error('Network response was not ok')
    }

    const reader = response.body.getReader()
    const textDecoder = new TextDecoder()
    let result = true
    let buffer = '' // 用于存储未完成的 JSON 数据

    while (result) {
      const { done, value } = await reader.read()

      if (done) {
        console.log('Stream ended')
        result = false
        break
      }

      const chunkText = textDecoder.decode(value)
      buffer += chunkText

      // 尝试解析 JSON 数据
      let boundary = buffer.indexOf('data:')
      while (boundary !== -1) {
        const jsonString = buffer.slice(boundary + 5) // 去掉 'data:' 前缀
        try {
          const jsonData = JSON.parse(jsonString)
          content.value = content.value + jsonData.choices[0].delta.content
          // 根据需要处理 jsonData
          buffer = '' // 清空缓冲区
        }
        catch (e) {
          // 如果解析失败，说明数据不完整，继续接收数据
          break
        }
        boundary = buffer.indexOf('data:')
      }
    }
  }
  catch (e) {
    console.log(e)
  }
}
</script>

<template>
  <div class="Test-page">
    <h1 class="text-amber bg-pink" @click="getServer">
      Test
    </h1>

    <div class="flex">
      <div ref="el" class="flex flex-col gap-2 p-4 w-300px h-300px m-auto bg-gray-500/5 rounded">
        <div v-for="item in list" :key="item.id" class="h-30 bg-gray-500/5 rounded p-3 cursor-move">
          {{ item.name }}
        </div>
      </div>
      <preview-list :list="list" />
    </div>
    <Child v-model="money" />
    {{ content }}
    <button @click="onSendApi">
      发送请求
    </button>
    <p @click="onScrollTarget">
      滑动
    </p>
    <div class="big" />
    <div class="target">
      123
    </div>
    <div class="container rays" />
    <div data-aos="fade-up-left" class="lt_card_background">
      hello aos.js!!!
    </div>
    xixixix
    <div class="big" />
  </div>
</template>

<style>
.ghost {
  opacity: 0.5;
  background: #c8ebfb;
}

.big {
  height: 1080px;
}

.target {
  width: 100%;
  height: 400px;
  background: skyblue;
}

.lt_card_background {
  width: 400px;
  height: 200px;
  margin: 40px auto 0;
  background: pink;
  border: 1px solid skyblue;
}
</style>

<style lang="scss">
/**
  * Rays
  *
  * @author jh3y
*/

$color: skyblue;
$ray-thickness: 10px;
$size: 20px;
$ray-size: $size * 5;

@keyframes rays {
  from {
    opacity: 1;
    transform: scale(0);
  }

  to {
    opacity: 0;
    transform: scale(1);
  }
}

.container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 10px auto;
  width: 175px;
  height: 175px;
  box-shadow: rgba(26, 26, 26, 0.1) 0px 1px 3px 0px;
}

.rays {

  &:after,
  &:before {
    border-radius: 100%;
    content: '';
    position: absolute;
  }

  &:after {
    animation: rays 1.5s infinite;
    border: $ray-thickness solid $color;
    height: $ray-size;
    width: $ray-size;
  }

  &:before {
    background: $color;
    height: $size;
    width: $size;
  }
}
</style>
